<template>
    <teleport to='.header'>
            <Header title="注册页哦"></Header>
    </teleport>
    <div>
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <p>注册协议及隐私政策</p>
                    <span>
                    在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
                    <u>
                        <b>
                            请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：<br>
                        </b>
                    </u>
                    <b>《京东用户注册协议》</b><br>
                    <b>《京东隐私政策》</b><br>
                    在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
                        请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
                   
                    
                    请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
                    请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：
                    </span>
                    <div class="dibu">
                        <van-button type="default" @click="$myRouter.push('/login')">不同意不许进！</van-button>
                        <van-button type="success" @click="show = !show">同意同意</van-button>
                    </div>
                </div>
            </div>
        </van-overlay>
        <div class="register-box">
            <van-steps
            class="step-box"
            :active="activeCount"
            active-icon="success"
            finish-icon="checked"
            active-color="#07c160">
            <van-step>手机号</van-step>
            <van-step>验证码</van-step>
            <van-step>密码</van-step>
            <van-step>完成注册</van-step>
            </van-steps>

            <div v-if="activeCount === 0" class="tel-box">
            <van-form @submit="activeCount = 1">
                <van-cell-group inset>
                <van-field
                    v-model="userInfo.tel"
                    name="tel"
                    autocomplete="off"
                    label="手机号"
                    placeholder="手机号"
                    :rules="[{ validator: testTel, trigger: 'onChange' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                <van-button :disabled="disableForTel" round block type="primary" native-type="submit">
                    下一步
                </van-button>
                </div>
            </van-form>
            </div>
            <div v-if="activeCount === 1" class="tel-code">
            <van-form @submit="codeHandler">
                <van-cell-group inset>
                <van-field
                    v-model="userInfo.telcode"
                    center
                    clearable
                    autocomplete="off"
                    label="短信验证码"
                    placeholder="请输入短信验证码">
                    <template #button>
                    <van-button v-if="statusForCodeBtn" @click="sendCodeHandler" size="small" type="primary">发送验证码</van-button>
                    <van-button v-else disabled size="small" type="primary">{{ timer }}(s) 以后再次发送</van-button>
                    </template>
                </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    下一步
                </van-button>
                </div>
            </van-form>
            </div>
            <div v-if="activeCount === 2" class="tel-pwd">
            <van-form @submit="pwdHandler">
                <van-cell-group inset>
                <van-field
                    v-model="userInfo.password"
                    name="password"
                    label="密码"
                    autocomplete="off"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                <van-button :disabled="!userInfo.password" round block type="primary" native-type="submit">
                    下一步
                </van-button>
                </div>
            </van-form>
            </div>
            <div v-if="activeCount === 3" class="tel-finish">
            <van-icon class="success" name="checked" />
            <span @click="$myRouter.push('/login')">完成注册</span>
        </div>
        <div class="zhe" v-if="show"></div>
  </div>
    </div>
</template>

<script name='sdyRegister' setup lang='ts'>
import { useRouter } from 'vue-router'
import { testTelHanlder, sendCodeHanlder, registerHanlder, testCodeHanlder } from '../../model/users'
const $myRouter = useRouter()
import { showFailToast } from 'vant'


import Header from '../../components/header.vue'
import { ref } from "vue";
const show = ref(true);
// 书写接口
interface User {
  tel: string,
  telcode: string,
  password: string
}

interface ResponseInfo {
  code?: string
  message?: string
  [key: string]: any
}

// 准备变量, 表示步骤条当前的步骤
const activeCount = ref<number>(0)

// 准备一个变量, 表示当前用户注册信息
const userInfo = ref<User>({ tel: '', telcode: '', password: '' })

// 准备一个变量, 表示 手机号部分的按钮禁用
const disableForTel = ref<boolean>(true)

// 表示手机号的表单校验规则
const testTel = async (val: string) => {
  // val 表示你填写的内容

  // 非空验证
  if (!val) return '请填写手机号'

  // 正则验证
  if (!/^\d{11}$/.test(val)) return '请填写合法的手机号'

  // 进行手机号验证
  const res = await testTelHanlder(val)

  // 判断条件 12345654323
  if ((res as unknown as ResponseInfo).code === '10005') return '该手机号已经被注册'
  else {
    disableForTel.value = false
    return true
  }
}

// 准备一个变量, 表示发送验证码按钮的状态
const statusForCodeBtn = ref<boolean>(true)
// 准备一个变量, 表示倒计时秒数
let timer = ref<number>(60)

// 发送验证码
const sendCodeHandler = async () => {
  statusForCodeBtn.value = false

  // 开启定时器
  const time: number = setInterval(() => {
    timer.value--
    // 判断倒计时结束
    if (timer.value <= 0) {
      clearInterval(time)
      statusForCodeBtn.value = true
    }
  }, 1000)

  const res = await sendCodeHanlder(userInfo.value.tel)
  console.log(res)
}

// 验证验证码
const codeHandler = async () => {
  const res = await testCodeHanlder(userInfo.value.tel, userInfo.value.telcode)

  if ((res as unknown as ResponseInfo).code !== '200') {
    // 提示错误
    showFailToast('验证码有误, 请重试')
    return
  }

  // 代码执行到这里, 继续注册
  activeCount.value = 2
}

// 提交密码注册
const pwdHandler = async () => {
  const res = await registerHanlder(userInfo.value.tel, userInfo.value.password)
  if ((res as unknown as ResponseInfo).code !== '200') {
    // 提示错误
    showFailToast('注册失败, 请重试')
    return
  }

  activeCount.value = 3
}


</script>

<style lang='scss' scoped>
.zhe{
    width: 100%;
    height: 20px;
    background-color: #4c4c4c;
    z-index: 1000;
    position: absolute;
    top: 78px;

}

.register-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  > .step-box {
    width: calc(100% - 30px);
    box-sizing: border-box;
    margin-bottom: 30px;
  }

  > .tel-finish {
    width: 150px;
    height: 150px;
    background-color: #07C160;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;

    > .success {
      font-size: 80px;
      color: #fff;
      margin-bottom: 10px;
    }

    > span {
      font-size: 20px;
      color: #fff;
    }
  }
}
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 999;
    position: absolute;
  }

  .block {
    box-sizing: border-box;
    margin: 50px;
    padding: 30px;
    width: 100%;
    height: 400px;
    border-radius: 30px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    p{
        text-align: center;
        color: #383838;
        height: 30px;
    }
    span{
        width: 100%;
        height: 50px;
        overflow: auto;
        flex: 1;
        color: #383838;
        font-size: 14px;

    }
    .dibu{
        display: flex;
        justify-content: space-between;
    }
  }
</style>